<nb-actions size="medium">
  <nb-action
    icon="message-circle-outline"
    [badgeDot]="true"
    badgePosition="top right"
    badgeStatus="danger"
    link="/message"
    [class.active]="isActive('message')">
  </nb-action>
  <nb-action
    icon="person-outline"
    [badgeDot]="true"
    badgePosition="top right"
    badgeStatus="warning"
    link="/friend"
    [class.active]="isActive('friend')">
  </nb-action>
  <nb-action
    icon="smiling-face-outline"
    [badgeDot]="true"
    badgePosition="top right"
    badgeStatus="info"
    link="/explore"
    [class.active]="isActive('explore')">
  </nb-action>
  <nb-action
    icon="settings-outline"
    badgePosition="top right"
    badgeStatus="info"
    link="/setting"
    [class.active]="isActive('setting')">
  </nb-action>
</nb-actions>
